﻿<!DOCTYPE html>
<html>

<head id="Head1" runat="server">
  <title>工时看板</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="Shortcut Icon" href="../images/aecc.ico" type="image/x-icon" />
  <link rel="stylesheet" href="../StaticFiles/layui/dist/css/layui.css" />
  <link rel="stylesheet" href="../StaticFiles/layui/admin.css" />
  <link rel="stylesheet" href="../styles/pace.css" />
  <script type="text/javascript" src="../Scripts/pace.min.js"></script>
  <script type="text/javascript" src="../Scripts/jquery-1.11.2.min.js"></script>
  <style type="text/css">
    html {
      background-image: url(../images/bg.jpg);
      background-repeat: no-repeat;
      color: #fff;
    }

    .layui-card {
      background-color: transparent;
      border: 1px dashed #1E9FFF;
    }

    .layui-card-header {
      color: #fff;
      border: none;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 0.1em;
    }

    /*左上图片*/
    .bg-left-top {
      position: absolute;
      left: -2px;
      top: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/left-top.png);
    }

    /*左下图片*/
    .bg-left-bottom {
      position: absolute;
      left: -2px;
      bottom: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/left-bottom.png);
    }

    /*右上图片*/
    .bg-right-top {
      position: absolute;
      right: -2px;
      top: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/right-top.png);
    }

    /*右下图片*/
    .bg-right-bottom {
      position: absolute;
      bottom: -2px;
      right: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/right-bottom.png);
    }
  </style>
</head>

<body>
  <!--[if lt IE 9]>
        <script src="../Scripts/pollyfills/html5.js"></script>
        <script src="../Scripts/pollyfills/response.js"></script>
    <![endif]-->

  <div class="layui-row" style="padding: 10px 15px;">
    <div class="layui-col-md3">
      <div>
        <img src="../images/aeec_logo.png" height="60" />
      </div>
    </div>
    <div class="layui-col-md6" style="height: 60px; line-height: 60px; text-align: center;
            font-size: 40px; letter-spacing: 0.1em;">
      装配厂工时看板
    </div>
    <div class="layui-col-md3" style="height: 60px; line-height: 60px; text-align: right;
            font-size: 16px; font-weight: bold;" id="currentTime">
    </div>
  </div>
  <div class="layui-fluid" style="padding-bottom: 0px;">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md6">
        <div class="layui-card">
          <div class="layui-card-header">
            <div class="bg-left-top">
            </div>
            <div class="bg-right-top">
            </div>
            <img src="../images/合计.png" height="20" alt="合计" />
            事业部本年总工时
          </div>
          <div class="layui-card-body">
            <div id="yearWorkTimeBar" style="height: 250px;">
            </div>
            <div class="bg-left-bottom">
            </div>
            <div class="bg-right-bottom">
            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-md6">
        <div class="layui-card">
          <div class="layui-card-header">
            <div class="bg-left-top">
            </div>
            <div class="bg-right-top">
            </div>
            <img src="../images/工作中心.png" height="20" alt="" />
            事业部各中心总工时
          </div>
          <div class="layui-card-body">
            <div id="allWorkCenterWorkTimeBar" style="height: 250px;">
            </div>
            <div class="bg-left-bottom">
            </div>
            <div class="bg-right-bottom">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="layui-fluid">
    <div class="layui-row">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">
            <div class="bg-left-top">
            </div>
            <div class="bg-right-top">
            </div>
            <img src="../images/趋势.png" height="24" alt="" />
            事业部1-12月每月工时
          </div>
          <div class="layui-card-body">
            <div id="allMonthWorkTimeBar" style="height: 300px;">
            </div>
            <div class="bg-left-bottom">
            </div>
            <div class="bg-right-bottom">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="../Scripts/echarts/echarts-5.4.0.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $(".layui-card:last-child").css({ "marginBottom": "0px" });
      function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
      };
      var $factoryid = getUrlParam('factoryid');

      // 页面右上方时钟
      function showTime() {
        var currentTime = new Date();
        var year = currentTime.getFullYear();
        var month = currentTime.getMonth() + 1;
        var date = currentTime.getDate();
        var day = currentTime.getDay();
        var hours = currentTime.getHours();
        var minutes = currentTime.getMinutes();
        var seconds = currentTime.getSeconds();
        var time = document.getElementById("currentTime");
        if (seconds < 10) {
          seconds = "0" + seconds;
        }
        if (minutes < 10) {
          minutes = "0" + minutes;
        }
        time.innerHTML = year + "年" + month + "月" + date + "日   " + hours + " : " + minutes + " : " + seconds;
      };
      setInterval(showTime, 500);

      function GetData() {
        $.ajax({
          type: "GET",
          url: "../handler/board/ZSWorkTimeInfoLookBoard.ashx?type=GetWorkTimeInfo",
          dataType: "text",
          cashe: false,
          data: {
            factoryid: $factoryid
          },
          beforeSend: function () {

            echarts.dispose(document.getElementById("yearWorkTimeBar"));
            var yearWorkTimeBar = echarts.init(document.getElementById('yearWorkTimeBar'));
            yearWorkTimeBar.showLoading({
              text: '数据查询中...',
              effect: 'whirling',
              maskColor: 'transparent',
              textColor: '#ffffff'
            });

            echarts.dispose(document.getElementById("allWorkCenterWorkTimeBar"));
            var allWorkCenterWorkTimeBar = echarts.init(document.getElementById('allWorkCenterWorkTimeBar'));
            allWorkCenterWorkTimeBar.showLoading({
              text: '数据查询中...',
              effect: 'whirling',
              maskColor: 'transparent',
              textColor: '#ffffff'
            });

            echarts.dispose(document.getElementById("allMonthWorkTimeBar"));
            var allMonthWorkTimeBar = echarts.init(document.getElementById('allMonthWorkTimeBar'));
            allMonthWorkTimeBar.showLoading({
              text: '数据查询中...',
              effect: 'whirling',
              maskColor: 'transparent',
              textColor: '#ffffff'
            });
          },
          success: function (data) {
            var obj = JSON.parse(data);

            var arrYearTotal = [], arrYearPichan = [], arrYearSGD = [], arrYearYF = [];
            arrYearTotal.push(obj["total"][0]["total"]);
            arrYearPichan.push(obj["total"][0]["pichan"]);
            arrYearSGD.push(obj["total"][0]["sgd"]);
            arrYearYF.push(obj["total"][0]["yf"]);

            var arrWorkcenter = [], arrWorkcenterData = [];
            for (var i = 0; i < obj["workcenter"].length; i++) {
              if (obj["workcenter"][i]["total"] > 0) {
                if (obj["workcenter"][i]["WORKCENTERNAME"].indexOf("装试") != -1) {
                  arrWorkcenter.push(obj["workcenter"][i]["WORKCENTERNAME"].replace("装试", ""));
                };
                arrWorkcenterData.push(obj["workcenter"][i]["total"]);
              }
            };

            var arrMonth = [];
            var arrMonthTotal = [], arrMonthPichan = [], arrMonthSGD = [], arrMonthYF = [];
            for (var i = 0; i < obj["month"].length; i++) {
              arrMonth.push(obj["month"][i]["month"]);
              arrMonthTotal.push(obj["month"][i]["total"]);
              arrMonthPichan.push(obj["month"][i]["pichan"]);
              arrMonthSGD.push(obj["month"][i]["sgd"]);
              arrMonthYF.push(obj["month"][i]["yf"]);
            };

            echarts.dispose(document.getElementById("yearWorkTimeBar"));
            echarts.dispose(document.getElementById("allWorkCenterWorkTimeBar"));
            echarts.dispose(document.getElementById("allMonthWorkTimeBar"));

            var yearChart = echarts.init(document.getElementById('yearWorkTimeBar'));
            var workcenterChart = echarts.init(document.getElementById('allWorkCenterWorkTimeBar'));
            var monthChart = echarts.init(document.getElementById('allMonthWorkTimeBar'));

            yearChart.hideLoading();
            workcenterChart.hideLoading();
            monthChart.hideLoading();

            //年工时总额
            var yearOption = {
              tooltip: {
                trigger: 'axis',
                show: true,
                axisPointer: {
                  type: 'shadow'
                }
              },
              grid: {
                left: '3%',
                right: '3%',
                bottom: '10%',
                containLabel: true
              },
              legend: {
                data: ['总工时', '批产工时', '施工工时', '油封工时'],
                x: 'center',
                y: '230',
                textStyle: {
                  fontSize: '12',
                  fontWeight: 'bold',
                  color: '#fff'
                }
              },
              color: ['#00BFFF', '#00ff00', '#FFB800', '#fff'],
              xAxis: [
                {
                  type: 'category',
                  data: [],
                  axisTick: {
                    alignWithLabel: true
                  },
                  axisLine: {
                    lineStyle: {
                      color: '#fff',
                      width: '1'
                    }
                  },
                  axisLabel: {
                    show: true,
                    textStyle: {
                      color: '#fff',
                      fontSize: '12',
                      fontWeight: 'bold'
                    }
                  }
                }
              ],
              yAxis: [
                {
                  type: 'value',
                  axisLine: {
                    lineStyle: {
                      color: '#fff',
                      width: '1'
                    }
                  },
                  axisLabel: {
                    show: true,
                    textStyle: {
                      color: '#fff',
                      fontSize: '12',
                      fontWeight: 'bold'
                    }
                  },
                  splitLine: {
                    show: false,
                    lineStyle: {
                      color: '#999',
                      type: 'dashed'
                    }
                  }
                }
              ],
              series: [
                {
                  name: '总工时',
                  type: 'bar',
                  barMaxWidth: 40,
                  data: arrYearTotal,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: '12',
                        fontWeight: 'bold'
                      },
                      barBorderRadius: [5, 5, 0, 0]
                    }
                  }
                },
                {
                  name: '批产工时',
                  type: 'bar',
                  barMaxWidth: 40,
                  data: arrYearPichan,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: '12',
                        fontWeight: 'bold'
                      },
                      barBorderRadius: [5, 5, 0, 0]
                    }
                  }
                },
                {
                  name: '施工工时',
                  type: 'bar',
                  barMaxWidth: 40,
                  data: arrYearSGD,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: '12',
                        fontWeight: 'bold'
                      },
                      barBorderRadius: [5, 5, 0, 0]
                    }
                  }
                },
                {
                  name: '油封工时',
                  type: 'bar',
                  barMaxWidth: 40,
                  data: arrYearYF,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: '12',
                        fontWeight: 'bold'
                      },
                      barBorderRadius: [5, 5, 0, 0]
                    }
                  }
                }
              ]
            };
            yearChart.setOption(yearOption);

            //各中心工时
            var workcenterOption = {
              tooltip: {
                trigger: 'axis',
                show: false,
                axisPointer: {
                  type: 'shadow'
                }
              },
              grid: {
                left: '2%',
                right: '2%',
                bottom: '1%',
                containLabel: true
              },
              legend: {
                data: ["总工时"],
                x: '10',
                y: '10',
                textStyle: {
                  fontSize: '12',
                  fontWeight: 'bold',
                  color: '#fff'
                }
              },
              color: ['#00BFFF'],
              xAxis: [
                {
                  type: 'category',
                  axisTick: {
                    alignWithLabel: true
                  },
                  axisLine: {
                    lineStyle: {
                      color: '#fff',
                      width: '1'
                    }
                  },
                  axisLabel: {
                    show: true,
                    textStyle: {
                      color: '#fff',
                      fontSize: '12',
                      fontWeight: 'bold'
                    }
                  },
                  data: arrWorkcenter
                }
              ],
              yAxis: [
                {
                  type: 'value',
                  axisLine: {
                    lineStyle: {
                      color: '#fff',
                      width: '1'
                    }
                  },
                  axisLabel: {
                    show: true,
                    textStyle: {
                      color: '#fff',
                      fontSize: '12',
                      fontWeight: 'bold'
                    }
                  },
                  splitLine: {
                    show: false,
                    lineStyle: {
                      color: '#999',
                      type: 'dashed'
                    }
                  }
                }
              ],
              series: [
                {
                  name: '总工时',
                  type: 'bar',
                  barMaxWidth: 30,
                  data: arrWorkcenterData,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: '12',
                        fontWeight: 'bold'
                      },
                      barBorderRadius: [5, 5, 0, 0]
                    }
                  }
                }
              ]
            };
            workcenterChart.setOption(workcenterOption);

            //1~12月工时波动情况
            var monthOption = {
              tooltip: {
                trigger: 'axis',
                show: true,
                axisPointer: {
                  type: 'shadow'
                }
              },
              legend: {
                data: ["批产", "施工", "油封", "总工时"],
                x: '10px',
                y: '10px',
                textStyle: {
                  fontSize: '12',
                  fontWeight: 'bold',
                  color: '#fff'
                }
              },
              grid: {
                left: '1%',
                right: '1%',
                bottom: '3%',
                containLabel: true
              },
              color: ['#00ff00', '#FFB800', '#FFF', '#00BFFF'],
              xAxis: [
                {
                  type: 'category',
                  axisTick: {
                    alignWithLabel: true
                  },
                  axisLine: {
                    lineStyle: {
                      color: '#fff',
                      width: '1'
                    }
                  },
                  axisLabel: {
                    show: true,
                    textStyle: {
                      color: '#fff',
                      fontSize: '12',
                      fontWeight: 'bold'
                    }
                  },
                  data: arrMonth
                }
              ],
              yAxis: [
                {
                  type: 'value',
                  axisLine: {
                    lineStyle: {
                      color: '#fff',
                      width: '1'
                    }
                  },
                  axisLabel: {
                    show: true,
                    textStyle: {
                      color: '#fff',
                      fontSize: '12',
                      fontWeight: 'bold'
                    }
                  },
                  splitLine: {
                    show: false,
                    lineStyle: {
                      color: '#999',
                      type: 'dashed'
                    }
                  }
                }
              ],
              series: [
                {
                  name: '批产',
                  type: 'bar',
                  stack: '工时',
                  barMaxWidth: 35,
                  data: arrMonthPichan,
                  itemStyle: {
                    normal: {
                      label: {
                        show: false,
                        position: 'top',
                        fontSize: '12',
                        fontWeight: 'bold'
                      }
                    }
                  }
                },
                {
                  name: '施工',
                  type: 'bar',
                  stack: '工时',
                  barMaxWidth: 35,
                  data: arrMonthSGD,
                  itemStyle: {
                    normal: {
                      label: {
                        show: false,
                        position: 'top',
                        fontSize: '12',
                        fontWeight: 'bold'
                      }
                    }
                  }
                },
                {
                  name: '油封',
                  type: 'bar',
                  stack: '工时',
                  barMaxWidth: 35,
                  data: arrMonthYF,
                  itemStyle: {
                    normal: {
                      label: {
                        show: false,
                        position: 'top',
                        fontSize: '12',
                        fontWeight: 'bold'
                      },
                      barBorderRadius: [5, 5, 0, 0]
                    }
                  }
                },
                {
                  name: '总工时',
                  type: 'line',
                  barMaxWidth: 35,
                  smooth: true,
                  data: arrMonthTotal,
                  symbolSize: 8,
                  hoverAnimation: false,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: '12',
                        fontWeight: 'bold'
                      }
                    }
                  },
                  lineStyle: {
                    width: 4
                  }
                }
              ]
            };
            monthChart.setOption(monthOption);
          }
        });
      };
      GetData();
    });
  </script>
</body>

</html>